
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xee2f;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xee2f;</div>
                    <div class="fontclass">.list</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee39;</i>
                    <div class="name">发送</div>
                    <div class="code">&amp;#xee39;</div>
                    <div class="fontclass">.send</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3c;</i>
                    <div class="name">充值</div>
                    <div class="code">&amp;#xee3c;</div>
                    <div class="fontclass">.recharge</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3d;</i>
                    <div class="name">付款方式</div>
                    <div class="code">&amp;#xee3d;</div>
                    <div class="fontclass">.paytype</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee52;</i>
                    <div class="name">电子书</div>
                    <div class="code">&amp;#xee52;</div>
                    <div class="fontclass">.ebook</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3b;</i>
                    <div class="name">扬声器</div>
                    <div class="code">&amp;#xee3b;</div>
                    <div class="fontclass">.speaker</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee44;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xee44;</div>
                    <div class="fontclass">.tag</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee42;</i>
                    <div class="name">钱袋</div>
                    <div class="code">&amp;#xee42;</div>
                    <div class="fontclass">.wallet</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee25;</i>
                    <div class="name">照相机</div>
                    <div class="code">&amp;#xee25;</div>
                    <div class="fontclass">.camera</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee57;</i>
                    <div class="name">正确</div>
                    <div class="code">&amp;#xee57;</div>
                    <div class="fontclass">.right</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee58;</i>
                    <div class="name">错误</div>
                    <div class="code">&amp;#xee58;</div>
                    <div class="fontclass">.fault</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5b;</i>
                    <div class="name">禁止</div>
                    <div class="code">&amp;#xee5b;</div>
                    <div class="fontclass">.deny</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5c;</i>
                    <div class="name">提示</div>
                    <div class="code">&amp;#xee5c;</div>
                    <div class="fontclass">.hint</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee47;</i>
                    <div class="name">创意</div>
                    <div class="code">&amp;#xee47;</div>
                    <div class="fontclass">.act</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee24;</i>
                    <div class="name">账户</div>
                    <div class="code">&amp;#xee24;</div>
                    <div class="fontclass">.account</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4b;</i>
                    <div class="name">文件</div>
                    <div class="code">&amp;#xee4b;</div>
                    <div class="fontclass">.file</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4c;</i>
                    <div class="name">编辑文件</div>
                    <div class="code">&amp;#xee4c;</div>
                    <div class="fontclass">.editfile</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4d;</i>
                    <div class="name">复制文件</div>
                    <div class="code">&amp;#xee4d;</div>
                    <div class="fontclass">.files</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee43;</i>
                    <div class="name">资料库</div>
                    <div class="code">&amp;#xee43;</div>
                    <div class="fontclass">.books</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee35;</i>
                    <div class="name">竖状图</div>
                    <div class="code">&amp;#xee35;</div>
                    <div class="fontclass">.stat</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee51;</i>
                    <div class="name">计划</div>
                    <div class="code">&amp;#xee51;</div>
                    <div class="fontclass">.plan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee49;</i>
                    <div class="name">用研</div>
                    <div class="code">&amp;#xee49;</div>
                    <div class="fontclass">.write</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee29;</i>
                    <div class="name">密匙</div>
                    <div class="code">&amp;#xee29;</div>
                    <div class="fontclass">.key</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4e;</i>
                    <div class="name">管理</div>
                    <div class="code">&amp;#xee4e;</div>
                    <div class="fontclass">.manage</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee27;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xee27;</div>
                    <div class="fontclass">.home</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee28;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xee28;</div>
                    <div class="fontclass">.search</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee21;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xee21;</div>
                    <div class="fontclass">.user</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3a;</i>
                    <div class="name">对话</div>
                    <div class="code">&amp;#xee3a;</div>
                    <div class="fontclass">.message</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee36;</i>
                    <div class="name">邮件</div>
                    <div class="code">&amp;#xee36;</div>
                    <div class="fontclass">.email</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5d;</i>
                    <div class="name">赞扬</div>
                    <div class="code">&amp;#xee5d;</div>
                    <div class="fontclass">.good</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5e;</i>
                    <div class="name">批评</div>
                    <div class="code">&amp;#xee5e;</div>
                    <div class="fontclass">.bad</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee26;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xee26;</div>
                    <div class="fontclass">.set</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4f;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xee4f;</div>
                    <div class="fontclass">.delete</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee59;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xee59;</div>
                    <div class="fontclass">.info</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5a;</i>
                    <div class="name">帮助</div>
                    <div class="code">&amp;#xee5a;</div>
                    <div class="fontclass">.help</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee53;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xee53;</div>
                    <div class="fontclass">.mark</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee54;</i>
                    <div class="name">喜爱</div>
                    <div class="code">&amp;#xee54;</div>
                    <div class="fontclass">.love</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee23;</i>
                    <div class="name">好友</div>
                    <div class="code">&amp;#xee23;</div>
                    <div class="fontclass">.friends</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4a;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xee4a;</div>
                    <div class="fontclass">.edit</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2c;</i>
                    <div class="name">附件</div>
                    <div class="code">&amp;#xee2c;</div>
                    <div class="fontclass">.attach</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee31;</i>
                    <div class="name">大列表</div>
                    <div class="code">&amp;#xee31;</div>
                    <div class="fontclass">.biglist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee33;</i>
                    <div class="name">大缩略图列表</div>
                    <div class="code">&amp;#xee33;</div>
                    <div class="fontclass">.imglist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee34;</i>
                    <div class="name">瀑布流</div>
                    <div class="code">&amp;#xee34;</div>
                    <div class="fontclass">.falllist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee32;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xee32;</div>
                    <div class="fontclass">.ilist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2d;</i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xee2d;</div>
                    <div class="fontclass">.download</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee38;</i>
                    <div class="name">发送邮件</div>
                    <div class="code">&amp;#xee38;</div>
                    <div class="fontclass">.sendemail</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee55;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xee55;</div>
                    <div class="fontclass">.add</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee56;</i>
                    <div class="name">减</div>
                    <div class="code">&amp;#xee56;</div>
                    <div class="fontclass">.sub</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2a;</i>
                    <div class="name">退出</div>
                    <div class="code">&amp;#xee2a;</div>
                    <div class="fontclass">.exit</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee37;</i>
                    <div class="name">打开信息</div>
                    <div class="code">&amp;#xee37;</div>
                    <div class="fontclass">.openemail</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2e;</i>
                    <div class="name">应用中心</div>
                    <div class="code">&amp;#xee2e;</div>
                    <div class="fontclass">.appcenter</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee62;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xee62;</div>
                    <div class="fontclass">.right1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5f;</i>
                    <div class="name">环</div>
                    <div class="code">&amp;#xee5f;</div>
                    <div class="fontclass">.ring</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3e;</i>
                    <div class="name">金额</div>
                    <div class="code">&amp;#xee3e;</div>
                    <div class="fontclass">.money</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2b;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#xee2b;</div>
                    <div class="fontclass">.image</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7d;</i>
                    <div class="name">平板</div>
                    <div class="code">&amp;#xee7d;</div>
                    <div class="fontclass">.pingban</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee60;</i>
                    <div class="name">书签</div>
                    <div class="code">&amp;#xee60;</div>
                    <div class="fontclass">.bookmark</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee72;</i>
                    <div class="name">钻石</div>
                    <div class="code">&amp;#xee72;</div>
                    <div class="fontclass">.zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee69;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xee69;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee45;</i>
                    <div class="name">订阅</div>
                    <div class="code">&amp;#xee45;</div>
                    <div class="fontclass">.subscription</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6b;</i>
                    <div class="name">返回顶部</div>
                    <div class="code">&amp;#xee6b;</div>
                    <div class="fontclass">.fanhuidingbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee48;</i>
                    <div class="name">办公桌</div>
                    <div class="code">&amp;#xee48;</div>
                    <div class="fontclass">.desk</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee67;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xee67;</div>
                    <div class="fontclass">.xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee68;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xee68;</div>
                    <div class="fontclass">.xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee66;</i>
                    <div class="name">点</div>
                    <div class="code">&amp;#xee66;</div>
                    <div class="fontclass">.dotc</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6a;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xee6a;</div>
                    <div class="fontclass">.xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee86;</i>
                    <div class="name">礼物</div>
                    <div class="code">&amp;#xee86;</div>
                    <div class="fontclass">.liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee65;</i>
                    <div class="name">点</div>
                    <div class="code">&amp;#xee65;</div>
                    <div class="fontclass">.dot</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee64;</i>
                    <div class="name">右箭头</div>
                    <div class="code">&amp;#xee64;</div>
                    <div class="fontclass">.arrowi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee61;</i>
                    <div class="name">小箭头</div>
                    <div class="code">&amp;#xee61;</div>
                    <div class="fontclass">.arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee22;</i>
                    <div class="name">管理员</div>
                    <div class="code">&amp;#xee22;</div>
                    <div class="fontclass">.writer</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee41;</i>
                    <div class="name">交易记录</div>
                    <div class="code">&amp;#xee41;</div>
                    <div class="fontclass">.paylog</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee78;</i>
                    <div class="name">夜间模式</div>
                    <div class="code">&amp;#xee78;</div>
                    <div class="fontclass">.yejianmoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7e;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xee7e;</div>
                    <div class="fontclass">.zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee71;</i>
                    <div class="name">皇冠</div>
                    <div class="code">&amp;#xee71;</div>
                    <div class="fontclass">.huangguan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee40;</i>
                    <div class="name">金币充值</div>
                    <div class="code">&amp;#xee40;</div>
                    <div class="fontclass">.dollar</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee63;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xee63;</div>
                    <div class="fontclass">.arrows</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee30;</i>
                    <div class="name">图文</div>
                    <div class="code">&amp;#xee30;</div>
                    <div class="fontclass">.pictxt</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7a;</i>
                    <div class="name">上下</div>
                    <div class="code">&amp;#xee7a;</div>
                    <div class="fontclass">.shangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3f;</i>
                    <div class="name">137学币1</div>
                    <div class="code">&amp;#xee3f;</div>
                    <div class="fontclass">.coin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee46;</i>
                    <div class="name">日志</div>
                    <div class="code">&amp;#xee46;</div>
                    <div class="fontclass">.log</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee50;</i>
                    <div class="name">书</div>
                    <div class="code">&amp;#xee50;</div>
                    <div class="fontclass">.read</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7b;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xee7b;</div>
                    <div class="fontclass">.shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7c;</i>
                    <div class="name">电脑</div>
                    <div class="code">&amp;#xee7c;</div>
                    <div class="fontclass">.diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6e;</i>
                    <div class="name">票</div>
                    <div class="code">&amp;#xee6e;</div>
                    <div class="fontclass">.piao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee84;</i>
                    <div class="name">单线花朵</div>
                    <div class="code">&amp;#xee84;</div>
                    <div class="fontclass">.danxianhuaduo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee85;</i>
                    <div class="name">块状花朵</div>
                    <div class="code">&amp;#xee85;</div>
                    <div class="fontclass">.kuaizhuanghuaduo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6f;</i>
                    <div class="name">vip</div>
                    <div class="code">&amp;#xee6f;</div>
                    <div class="fontclass">.vip</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6d;</i>
                    <div class="name">福蛋</div>
                    <div class="code">&amp;#xee6d;</div>
                    <div class="fontclass">.fudan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8b;</i>
                    <div class="name">v</div>
                    <div class="code">&amp;#xee8b;</div>
                    <div class="fontclass">.v</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6c;</i>
                    <div class="name">鲜花</div>
                    <div class="code">&amp;#xee6c;</div>
                    <div class="fontclass">.baoji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee79;</i>
                    <div class="name">晴（白天）</div>
                    <div class="code">&amp;#xee79;</div>
                    <div class="fontclass">.qingbaitian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee70;</i>
                    <div class="name">赏2-01</div>
                    <div class="code">&amp;#xee70;</div>
                    <div class="fontclass">.shang201</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee75;</i>
                    <div class="name">用户头像</div>
                    <div class="code">&amp;#xee75;</div>
                    <div class="fontclass">.yonghutouxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee77;</i>
                    <div class="name">画笔颜色</div>
                    <div class="code">&amp;#xee77;</div>
                    <div class="fontclass">.huabiyanse</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee76;</i>
                    <div class="name">字体大小</div>
                    <div class="code">&amp;#xee76;</div>
                    <div class="fontclass">.zitidaxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee74;</i>
                    <div class="name">女</div>
                    <div class="code">&amp;#xee74;</div>
                    <div class="fontclass">.nv</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee73;</i>
                    <div class="name">男</div>
                    <div class="code">&amp;#xee73;</div>
                    <div class="fontclass">.nan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee83;</i>
                    <div class="name">3.1收藏-选中</div>
                    <div class="code">&amp;#xee83;</div>
                    <div class="fontclass">.31shoucangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee82;</i>
                    <div class="name">3.1收藏</div>
                    <div class="code">&amp;#xee82;</div>
                    <div class="fontclass">.31shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee81;</i>
                    <div class="name">3.1关注1-选中</div>
                    <div class="code">&amp;#xee81;</div>
                    <div class="fontclass">.31guanzhu1xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee80;</i>
                    <div class="name">3.1关注1</div>
                    <div class="code">&amp;#xee80;</div>
                    <div class="fontclass">.31guanzhu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee88;</i>
                    <div class="name">奖励所得</div>
                    <div class="code">&amp;#xee88;</div>
                    <div class="fontclass">.jianglisuode</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee89;</i>
                    <div class="name">奖励</div>
                    <div class="code">&amp;#xee89;</div>
                    <div class="fontclass">.jiangli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7f;</i>
                    <div class="name">教练休息</div>
                    <div class="code">&amp;#xee7f;</div>
                    <div class="fontclass">.jiaolianxiuxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee87;</i>
                    <div class="name">红包</div>
                    <div class="code">&amp;#xee87;</div>
                    <div class="fontclass">.hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8a;</i>
                    <div class="name">完</div>
                    <div class="code">&amp;#xee8a;</div>
                    <div class="fontclass">.wan</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
